<template>
    <Dashboard :menu="menu">
        <el-row>
            <el-row>
                <el-button type="primary" @click="addDelivery">新增</el-button>
            </el-row>
            <el-table :data="deliveryData" stripe style="margin-top:24px">
                <el-table-column prop="delivery_name" label="名称" header-align="center" align="center">
                </el-table-column>
                <el-table-column prop="status" label="状态" header-align="center" align="center">
                    <template slot-scope="scoped">
                        <el-row style="font-weight:700;color:#19be6b" v-if="scoped.row.status">开启</el-row>
                        <el-row style="font-weight:700;color:#f50" v-else>关闭</el-row>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center" header-align="center" width="100">
                    <template slot-scope="scope">
                        <el-tooltip :content="scope.row.status?'关闭':'开启'">
                            <i class="iconfont icon-bianji1" @click='deliveryStatus(scope.row)' style="font-size:26px;cursor:pointer;color:rgb(158, 167, 179)"></i>
                        </el-tooltip>
                        <el-tooltip content="删除">
                            <i class="iconfont icon-shanchu2" @click="deliveryDel(scope.row)" style="font-size:26px;cursor:pointer;color:rgb(158, 167, 179)"></i>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
            <el-row style="margin:24px 0">
                <el-col :span="24" style="text-align:right">
                    <el-pagination background layout="total,prev,pager,next" :total="pagination.rowCount" :page-size="pagination.pageSize" @current-change="changePage"></el-pagination>
                </el-col>
            </el-row>
        </el-row>
        <!-- 快递列表 -->
        <el-dialog title="选择快递" :visible.sync="showModal" top="10px">
            <el-row style="padding:20px;background:#f8f8f8">
                <span style="margin-right:10px">快递名称</span>
                <el-input v-model="name" placeholder="请输入快递名称" style="width:400px"></el-input>
                <el-row style="margin-top:10px;padding-left:65px">
                    <el-button type="primary" @click="searchDelivery">搜索</el-button>
                    <el-button type="text" @click="clearSearch">清空</el-button>
                </el-row>
            </el-row>
            <el-table :data="kuaidiData" stripe @selection-change="SelectionChange" ref="table">
                <el-table-column type="selection" width="50"></el-table-column>
                <el-table-column prop="delivery_name" label="快递名称" align="center" header-align="center"></el-table-column>
            </el-table>
            <el-row style="margin-top:16px">
                <el-col :span="24" style="text-align:right">
                    <el-pagination background layout="total,prev,pager,next" :total="page.rowCount" :page-size="page.pageSize" @current-change="kuaidiPage"></el-pagination>
                </el-col>
            </el-row>
            <p slot="footer">
                <el-button size="small" @click="cancel">取消</el-button>
                <el-button type="primary" size="small" @click="ok">确定</el-button>
            </p>
        </el-dialog>
    </Dashboard>
</template>

<script>
import Dashboard from "./../../../components/Dashboard.vue";
export default {
    components: {
        Dashboard
    },
    data() {
        return {
            menu: [
                {
                    name: "快递",
                    icon: "icon-fahuo",
                    sub: [
                        {
                            name: "快递列表",
                            url: "/shop/delivery"
                        }
                    ]
                }
            ],
            deliveryData: [],
            pagination: {},
            selections: [],
            showModal: false,
            kuaidiData: [],
            page: {
                page: 1
            },
            kuaidiSelection: [],
            name: ""
        };
    },
    async asyncData({ app }) {
        let data = {};
        //店铺快递列表
        const res = await app.$axios.$get(
            "/api/shop/home/shop/plugin/kuaidi/shop"
        );
        if (res && res.errmsg === "ok") {
            data.deliveryData = res.data.data;
            data.pagination = res.data.pagination;
        }

        return data;
    },
    methods: {
        //店铺快递列表
        async getData() {
            let url = `/api/shop/home/shop/plugin/kuaidi/shop?page=${
                this.pagination.page
            }`;
            const res = await this.$axios.$get(url);
            if (res && res.errmsg === "ok") {
                this.deliveryData = res.data.data;
                this.pagination = res.data.pagination;
            }
        },
        changePage(page) {
            this.pagination.page = page;
            this.getData();
        },
        async getAllDelivery() {
            //店铺所有快递
            const delivery = await this.$axios.$get(
                `/api/shop/home/shop/plugin/kuaidi/shopAll`
            );
            if (delivery && delivery.errmsg === "ok") {
                this.allDelivery = delivery.data;
            }
        },
        //快递列表
        async getKuaidi() {
            let url = `/api/shop/home/shop/plugin/kuaidi/index?page=${
                this.page.page
            }`;
            if (this.name) {
                url += `&name=${this.name}`;
            }
            const res = await this.$axios.$get(url);
            if (res && res.errmsg === "ok") {
                this.kuaidiData = res.data.data;
                this.page = res.data.pagination;

                for (let key in this.kuaidiData) {
                    for (let val in this.allDelivery) {
                        if (
                            this.kuaidiData[key].id ==
                            this.allDelivery[val].delivery_id
                        ) {
                            this.kuaidiData[key].selected = true;
                            this.selections.push(this.kuaidiData[key]);
                            this.$nextTick(() => {
                                this.$refs.table.toggleRowSelection(
                                    this.kuaidiData[key]
                                );
                            });
                        }
                    }
                }
            }
        },
        kuaidiPage(page) {
            this.page.page = page;
            this.getKuaidi();
        },
        addDelivery() {
            this.name = "";
            this.showModal = true;
            this.page.page = 1;
            this.getAllDelivery();
            this.getKuaidi();
        },
        //删除
        async deliveryDel(row) {
            const res = await this.$axios.$get(
                `/api/shop/home/shop/plugin/kuaidi/del?id=${row.id}`
            );
            if (res && res.errmsg === "ok") {
                this.$message.success("删除成功");
                this.getData();
            }
        },
        //开启关闭
        async deliveryStatus(row) {
            let status = row.status ? 0 : 1;
            const res = await this.$axios.$get(
                `/api/shop/home/shop/plugin/kuaidi/update?id=${
                    row.id
                }&status=${status}`
            );
            if (res && res.errmsg === "ok") {
                this.$message.success(status ? "已开启" : "已关闭");
                this.getData();
            }
        },
        //搜索
        searchDelivery() {
            this.page.page = 1;
            this.getKuaidi();
        },
        clearSearch() {
            this.name = "";
            this.page.page = 1;
            this.getKuaidi();
        },
        SelectionChange(val) {
            this.selections = val;
        },
        cancel() {
            this.showModal = false;
        },
        async ok() {
            //初始勾选的数组
            let arr = [];
            for (let key in this.kuaidiData) {
                if (this.kuaidiData[key].selected) {
                    arr.push(this.kuaidiData[key]);
                }
            }
            //新增的
            let add = [];
            this.selections.forEach(e => {
                if (!e.selected) {
                    add.push(e);
                }
            });
            //删除的
            let del = [];
            arr.forEach(e => {
                let is_same = false;
                this.selections.forEach(val => {
                    if (e.id == val.id) {
                        is_same = true;
                        return;
                    }
                });
                if (!is_same) {
                    del.push(e.id);
                }
            });

            const res = await this.$axios.$post(
                `/api/shop/home/shop/plugin/kuaidi/add`,
                {
                    add: add,
                    del: del
                }
            );
            if (res && res.errmsg === "ok") {
                this.getData();
                this.showModal = false;
            }
        }
    }
};
</script>
